<template>
    <div class="full-screen-404">
      <div class="error-content">
        <h1>404 - 页面未找到</h1>
        <img src="/png/404.png" alt="404 Error" class="error-image"> 
        <p>很抱歉，你访问的页面不存在。</p>
        <router-link to="/" class="home-link">返回首页</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  // 这里可以添加逻辑，如果需要的话
  </script>
  
  <style scoped>
  .full-screen-404 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #f4f4f4; /* 可根据需要修改背景颜色 */
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保 404 页面在最上层 */
  }
  
  .error-content {
    text-align: center;
  }
  
  .error-content h1 {
    font-size: 3rem;
    color: #e74c3c; /* 可根据需要修改标题颜色 */
    margin-bottom: 1rem;
  }
  
  .error-content p {
    font-size: 1.2rem;
    color: #333; /* 可根据需要修改段落颜色 */
    margin-bottom: 2rem;
  }
  
  .home-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #1a73e8;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .home-link:hover {
    background-color: #155da0;
  }
  
  .error-image {
    width: 300px; /* 根据需要调整图片宽度 */
    height: auto;
    animation: fadeIn 1s ease; /* 应用淡入动画 */
    margin-bottom: 2rem;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  </style>